<template>
  <div class="contentLeft">
    <!-- 项目评价 -->
    <!-- 暂时隐藏，请勿删掉代码 -->
    <div class="scoreBox" v-if="isShowScore">
      <el-row>
        <el-col :span="7" class="scoreLeft">
          <div class="title" style="text-align: left">项目动态评价</div>
          <p
            v-if="gradeLevel"
            style="
              font-size: 64px;
              color: #333333;
              margin-top: 45px;
              font-family: Microsoft YaHei;
            "
          >
            {{ gradeLevel }}
          </p>
          <img
            v-else
            src="../../../static/img/level/noLevel.png"
            class="projectLevel"
          />
          <!-- <img v-if="!gradeLevel" src="../../../static/img/level/noLevel.png" class="projectLevel" /> -->
          <!-- <img v-if="gradeLevel == 'A'" src="../../../static/img/level/A.png" class="projectLevel" />
          <img v-if="gradeLevel == 'B'" src="../../../static/img/level/B.png" class="projectLevel" />
          <img v-if="gradeLevel == 'C'" src="../../../static/img/level/C.png" class="projectLevel" />
          <img v-if="gradeLevel == 'D'" src="../../../static/img/level/D.png" class="projectLevel" /> -->
        </el-col>
        <el-col :span="17" class="scoreRight">
          <div class="title">项目评级历史动态</div>
          <div class="noData" v-if="gradeLevelHistory.length === 0">
            暂无项目评级历史动态
          </div>
          <div class="listBox" v-else-if="gradeLevelHistory.length > 0">
            <ul>
              <li v-for="(item, index) of gradeLevelHistory" :key="index">
                <span class="time ellipsis" :title="item.createTime">{{
                  item.createTime || '--'
                }}</span>
                <span class="reason ellipsis" :title="item.levelReason">{{
                  item.reasons == null
                    ? '被评定为' + item.gradeLevel
                    : item.levelReason
                }}</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 分账管理 -->
    <div class="accountBox">
      <div class="title">分账管理制度落实情况</div>
      <!-- <el-row class="noAccount" v-if="hasSalaryAccount == false">
                <p>尚未设置工资专户</p>
                <p>暂无分账管理制度落实情况数据</p>
      </el-row>-->
      <div v-if="hasSalaryAccount == false" class="noRealName">
        <p v-if="companyType === 'SG' && userType === 'QY'">
          <i class="iconfont iconjingshi"></i>
          <span>您还未添加专户信息，请尽快添加！</span>
          <!-- <span v-else>暂无分账管理制度落实情况数据</span> -->
        </p>
        <p v-else style="color: #333; font-size: 16px">
          暂无分账管理制度落实情况数据
        </p>
        <el-button
          class="commonBut saveBtn addEmployee"
          icon="iconfont icontianjia"
          @click="addAccountInfo"
          v-show="companyType === 'SG' && userType === 'QY'"
          >添加专户</el-button
        >
      </div>
      <el-row v-if="hasSalaryAccount == true">
        <el-col :span="10" class="accountLeft">
          <ul>
            <li>
              <span class="label">专户银行</span>
              <span class="information">{{ accountInfo.bankName || '0' }}</span>
            </li>
            <li>
              <span class="label">专户名称</span>
              <span class="information">{{
                accountInfo.accountName || '--'
              }}</span>
            </li>
            <li>
              <span class="label">专户账号</span>
              <span class="information">{{
                accountInfo.account | deseHandler(4, 4, '*')
              }}</span>
            </li>
            <li>
              <span class="label">签约状态</span>
              <span class="information" v-if="accountInfo.signed === 1"
                >已签约</span
              >
              <span class="information" v-if="accountInfo.signed === 0"
                >未签约</span
              >
            </li>
          </ul>
        </el-col>
        <el-col :span="14" class="accountRight">
          <div class="bankInfo">
            <div class="payoff">
              <div>
                <p class="color999">专户缴存总额（万元）</p>
                <p class="moneyAll fontColorTheme">
                  {{ accountInfo.payTotal | splitNumber }}
                </p>
              </div>
              <div>
                <p class="color999">专户缴存余额（万元）</p>
                <p class="moneyLittle">
                  {{ accountInfo.balance | splitNumber }}
                </p>
              </div>
            </div>
            <template v-if="!isEsUser()">
              <p class="color999">专户应缴金额（万元）</p>
              <p>{{ accountInfo.shouldDisburseTotal | splitNumber }}</p>
            </template>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 实名制 -->
    <div class="reactBox">
      <div class="title">实名制管理制度落实情况</div>
      <div class="keyWrapper" style="height: 204px">
        <!-- 企业端实名制为空的时候显示 -->
        <div v-if="noRealName && userType === 'QY'" class="noRealName">
          <p>
            <i class="iconfont iconjingshi"></i>
            <span>您还未添加实名制信息，请尽快添加！</span>
          </p>
          <el-button
            v-show="companyType === 'SG'"
            class="commonBut saveBtn addEmployee"
            icon="iconfont icontianjia"
            @click="addEmployee"
            >添加人员</el-button
          >
        </div>
        <ul v-else>
          <li class="keyBox">
            <p class="keyName">实名制总人数</p>
            <p>
              <span class="quantity fontColorTheme">{{
                employeeInfo.projectRealNameTotalCount || '0'
              }}</span>
              <span class="keyName">人</span>
            </p>
          </li>
          <li class="keyBox">
            <p class="keyName">本月新增人数</p>
            <p>
              <span class="quantity fontColorTheme">{{
                employeeInfo.projectThisMonthRealNameCount || '0'
              }}</span>
              <span class="keyName">人</span>
            </p>
          </li>
          <li class="keyBox">
            <p class="keyName">总考勤数</p>
            <p>
              <span class="quantity fontColorTheme">{{
                employeeInfo.projectTotalAttCount || '0'
              }}</span>
              <span class="keyName">次</span>
            </p>
          </li>
          <li class="keyBox">
            <p class="keyName">本月考勤数</p>
            <p>
              <span class="quantity fontColorTheme">{{
                employeeInfo.projectThisMontAttCount || '0'
              }}</span>
              <span class="keyName">次</span>
            </p>
          </li>
          <li class="keyBox">
            <p class="keyName">实名制合同签订比例</p>
            <p class="quantity fontColorTheme">
              {{ employeeInfo.signNameContractReal || '0' }}%
            </p>
          </li>
          <li class="keyBox">
            <p class="keyName">实名制考勤比例</p>
            <p class="quantity fontColorTheme">
              {{ employeeInfo.signNameAttReal || '0' }}%
            </p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 今日考勤状概况 -->
    <div class="attBox">
      <div class="title">
        今日考勤概况
        <el-tooltip content="Top center" placement="top" effect="dark">
          <div slot="content">数据将实时同步，可能与其他统计数据不一致</div>
          <i class="icon iconfont iconhuabanfuben"></i>
        </el-tooltip>
      </div>
      <div class="attDataBox clearfix">
        <div class="leftBox fl">
          <div ref="todayAtt" class="todayAtt"></div>
          <div>
            <ul>
              <li>
                <span class="labelTitle"
                  >项目{{ isEsUser() ? '累计' : '' }}在职人数：</span
                ><span class="content fontColorTheme">{{ empOnJob }}人</span>
              </li>
              <li>
                <span class="labelTitle">今日出勤人数：</span
                ><span class="content">{{ attTodayTotal }}人</span>
              </li>
              <li v-if="!isEsUser()">
                <span class="labelTitle">考勤率：</span
                ><span class="content fontColorTheme">{{ attTotalRate }}%</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="rightBox fr">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            v-loading="loadingAll"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            lazy
            style="width: 100%"
            :load="load"
            row-key="id"
            border
            height="275"
            ref="table"
            :row-style="{ height: '0' }"
            :cell-style="{ padding: '11px' }"
          >
            <!-- <el-table-column prop="name" label="所属单位"  :show-overflow-tooltip="true" align="left"></el-table-column> -->
            <el-table-column label="所属单位" width="230">
              <template slot-scope="scope">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.name"
                  :columnName="'name'"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column
              prop="empOnJobTotal"
              width="220"
              label="在职人数（人）"
            ></el-table-column>
            <el-table-column
              prop="attTodayTotal"
              width="220"
              label="今日出勤人数（人）"
            ></el-table-column>
            <el-table-column
              v-if="!isEsUser()"
              width="180"
              prop="attTotalRate"
              label="考勤率"
            >
              <template slot-scope="scope">
                {{
                  scope.row.attTotalRate == '0'
                    ? '0'
                    : scope.row.attTotalRate + '%'
                }}
              </template>
            </el-table-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty" v-show="isShow">
              <emptyTable emptyText="暂无相关数据"></emptyTable>
            </div>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 工资代发 -->
    <div class="salaryBox">
      <div class="title">
        工资代发制度落实情况
        <span class="smallTitle" v-if="detailsalaryDay"
          >（每月{{ detailsalaryDay || '--' }}日为工资发放日）</span
        >
      </div>
      <div class="keyWrapper" style="height: 244px">
        <!-- 企业端工资代发为空的时候显示 -->
        <div v-if="noSalary && userType === 'QY'" class="noSalary">
          <p>请补充工资专户信息及项目工人后制作工资表</p>
        </div>
        <ul v-else>
          <li class="keyBox">
            <p class="keyName">代发总金额</p>
            <p>
              <span class="quantity fontColorTheme">{{
                salaryInfo.projectRealNameTotalCount || '0'
              }}</span>
              <span class="keyName">万元</span>
            </p>
          </li>
          <li class="keyBox">
            <p class="keyName">代发总人次</p>
            <p>
              <span class="quantity fontColorTheme">{{
                salaryInfo.bankActPayTotal || '0'
              }}</span>
              <span class="keyName">人</span>
            </p>
          </li>
          <li class="keyBox">
            <p class="keyName">本月实发金额</p>
            <p>
              <span class="quantity fontColorTheme">{{
                salaryInfo.projectThisMonthSalaryTotal || '0'
              }}</span>
              <span class="keyName">万元</span>
            </p>
          </li>
          <li class="keyBox">
            <p class="keyName">工资代发比例</p>
            <p>
              <span class="quantity fontColorTheme"
                >{{ salaryInfo.salaryPayRatio || '0' }}%</span
              >
            </p>
          </li>
          <li class="keyBox" v-if="!isEsUser()">
            <p class="keyName fontSize">工资确认比例（工资表附件）</p>
            <p class="quantity fontColorTheme">
              {{ salaryInfo.salaryConfirmFileRatio || '0' }}%
            </p>
          </li>
          <li class="keyBox" v-if="!isEsUser()">
            <p class="keyName fontSize">工资确认比例（手机app）</p>
            <p class="quantity fontColorTheme">
              {{ salaryInfo.salaryConfirmAPPRatio || '0' }}%
            </p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 保证金 -->
    <div class="bzjBox">
      <div class="title">工资保证金制度落实情况</div>
      <!-- 企业端工资保证金为空的时候显示 -->
      <div v-if="!hasDeposit && userType === 'QY'" class="noDeposit">
        <p>暂无工资保证金制度落实情况信息</p>
      </div>
      <div v-else>
        <el-row>
          <el-col :span="8">
            <span class="labelWidth">缴纳情况：</span>
            <span class="information" v-if="bzjInfo.hasDeposit == true"
              >有缴纳记录</span
            >
            <span class="information" v-if="bzjInfo.hasDeposit == false"
              >无缴纳记录</span
            >
          </el-col>
          <el-col :span="8">
            <span class="labelWidth">动用情况：</span>
            <span class="information" v-if="bzjInfo.isExpenditure == '1'"
              >有动用记录</span
            >
            <span class="information" v-else>无动用记录</span>
          </el-col>
          <el-col :span="8">
            <span class="labelWidth">最新状态：</span>
            <span class="information">{{ bzjInfo.statusDesc || '--' }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <span class="labelWidth">缴纳比例：</span>
            <span class="information">{{ this.paymentRatioList || '0' }}</span>
          </el-col>
          <el-col :span="8">
            <span class="labelWidth">应缴金额：</span>
            <span class="information">{{ this.amountPayableList || '0' }}</span>
          </el-col>
          <el-col :span="8">
            <span class="labelWidth">实缴金额：</span>
            <span class="information">{{ bzjInfo.payTotal || '0' }}元</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <span class="labelWidth">余额：</span>
            <span class="information">{{ bzjInfo.balance || '0' }}元</span>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'projectDetailKbLeft',
  props: [
    'projectId',
    'detailsalaryDay',
    'userType',
    'companyType',
    'projectName',
  ],
  data() {
    return {
      gradeLevel: '', //评级
      gradeLevelHistory: [], //评级动态
      hasSalaryAccount: false,
      accountInfo: {}, //专户分拨账户
      employeeInfo: '', //实名制
      salaryInfo: '', //工资代发信息
      bzjInfo: '', //保证金
      noRealName: true, //判断没有实名制
      noSalary: true, //表示没有工资
      hasDeposit: true, //判断是否有保证金
      isShowScore: false,
      paymentRatioList: '',
      amountPayableList: '',
      myChart: '',
      loadingAll: false,
      tableData: [],
      isShow: false,
      attTotalRate: '',
      attTodayTotal: '',
      empOnJob: '',
    }
  },
  created() {
    //项目评级
    this.getLevel()
    //分账管理
    this.getAccount()
    //实名制
    this.getEmployee()
    //工资代发
    this.getSalary()
    //保证金信息
    this.getBzjInfo()
    // 因新版信用未更改到此处，因此新隐藏项目评价
    if (this.isEsUser()) {
      this.isShowScore = false
    } else {
      this.isShowScore = true
    }

    this.getAttData()

    // 考勤列表
    this.getAttList()
  },
  mounted() {
    // 考勤图例
    // this.getTodayAttData()
  },
  methods: {
    getLevel() {
      this.axios({
        method: 'post',
        url: 'api-ps/creditProjectScore/expand/projectScoreByLatest',
        data: {
          projectId: this.projectId,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.gradeLevel = res.data.result[0].gradeLevel
            this.gradeLevelHistory = res.data.result
          }
        })
        .catch((error) => {})
    },
    getAccount() {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/findaccountbyprojectid',
        data: {
          projectId: this.projectId,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            var data = res.data.result
            this.hasSalaryAccount = data.hasSalaryAccount
            if (this.hasSalaryAccount == true) {
              this.accountInfo = res.data.result
            }
          }
        })
        .catch((error) => {})
    },
    getEmployee() {
      this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/projectrealnamestatistics',
        data: {
          projectId: this.projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.employeeInfo = response.data.result
            this.noRealName = response.data.result.noRealName
          }
        })
        .catch((response) => {})
    },
    getSalary() {
      this.axios({
        method: 'post',
        url: 'api-su/cs/salarystats/expand/salarydistribution',
        data: {
          projectId: this.projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.salaryInfo = response.data.result
            this.noSalary = response.data.result.noSalary
          }
        })
        .catch((response) => {})
    },
    getBzjInfo() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/projectdepositdetail',
        data: {
          projectId: this.projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            let scaleList = []
            let salayList = []
            this.bzjInfo = response.data.result
            response.data.result.depositScales.forEach((item, index) => {
              scaleList.push(item.scale + '%')
              salayList.push(item.shouldPayTotal + '元')
            })
            this.paymentRatioList = scaleList.join(',')
            this.amountPayableList = salayList.join(',')
            this.hasDeposit = response.data.result.hasDeposit
          }
        })
        .catch((error) => {
          // this.$message.error("专户数据获取失败");
        })
    },
    //添加人员
    addEmployee() {
      this.$router.push({
        name: 'projectEmployeeQY',
        path: '/home/employee/projectEmployeeQY',
        query: {
          projectId: this.projectId,
          projectName: this.projectName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/employee/projectEmployeeQY',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //添加专户
    addAccountInfo() {
      this.$router.push({
        name: 'specialAccountList',
        path: '/home/specialAccount/specialAccountList',
        query: {
          projectId: this.projectId,
          projectName: this.projectName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/specialAccountList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 获取考勤概况数据
    getAttData() {
      this.axios({
        method: 'post',
        url: '/api-att/cs/att/expand/atttodaytotal',
        data: { projectId: this.projectId },
      })
        .then((response) => {
          var data = response.data.result
          this.attTotalRate = data.attTotalRate
          this.attTodayTotal = data.attTodayTotal
          this.empOnJob = data.empOnJob
          this.getTodayAttPicData()
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    // 获取考勤图例数据
    getTodayAttPicData() {
      var fontNum = document.body.clientWidth / 80,
        fontText = document.body.clientWidth / 130
      var todayAtt = this.$refs.todayAtt
      var picData
      if (this.empOnJob == '0' || this.empOnJob == 0) {
        picData = [
          {
            value: this.empOnJob,
            name: '无数据',
            itemStyle: { color: '#ccc' },
          },
        ]
      } else {
        picData = [
          {
            value: this.attTodayTotal,
            name: '今日出勤人数',
            itemStyle: { color: '#098F84' },
          },
          {
            value: this.empOnJob - this.attTodayTotal,
            name: '今日未出勤人数',
            itemStyle: { color: '#DB2121' },
          },
        ]
      }
      if (todayAtt) {
        this.myChart = this.$echarts.init(todayAtt)
        this.myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{b}:{c}人',
          },
          series: [
            {
              name: '今日考勤概况',
              type: 'pie',
              radius: ['55%', '70%'],
              center: ['50%', '50%'], //图的位置，距离左跟上的位置
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center',
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: picData,
            },
          ],
          graphic: [
            {
              type: 'text',
              left: 'center',
              top: '40%',
              z: 10,
              zlevel: 10,
              style: {
                text: this.empOnJob + '人',
                fill: '#424242',
                textAlign: 'center',
                // font: "small-caps 24px/1 sans-serif"
                fontSize: fontNum,
              },
            },
            {
              type: 'text',
              left: 'center',
              top: '55%',
              z: 10,
              zlevel: 10,
              style: {
                text: '项目在职人数',
                fill: '#666',
                textAlign: 'center',
                // font: "small-caps 14px/1 sans-serif",
                fontSize: fontText,
              },
            },
          ],
        })
        window.addEventListener('resize', () => {
          this.myChart.resize()
        })
      }
    },
    getAttList() {
      const vm = this
      vm.axios({
        method: 'post',
        url: '/api-att/cs/att/expand/atttodaytotallist',
        data: { projectId: this.projectId },
      })
        .then((response) => {
          vm.tableData = response.data.result
          vm.loadingAll = false
          if (vm.tableData.length < 1) {
            vm.isShow = true
          }
        })
        .catch((error) => {
          vm.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    load(tree, treeNode, resolve) {
      this.axios({
        method: 'post',
        url: '/api-att/cs/att/expand/atttodaytotaldetail',
        data: {
          projectId: this.projectId,
          projectCompanyId: tree.projectCompanyId,
        },
      }).then((res) => {
        let tableArray = res.data.result
        tableArray.forEach((item, index) => {
          delete item.areaName
        })
        resolve(res.data.result)
        if (res.data.result.length == 0) {
          this.$message({
            type: 'error',
            message: '本节点以下暂无子节点!',
          })
        }
      })
      // setTimeout(() => {
      //   resolve([
      //     {
      //       id: 31,
      //       date: '2016-05-01',
      //       name: '王小虎',
      //       address: '上海市普陀区金沙江路 1519 弄'
      //     }, {
      //       id: 32,
      //       date: '2016-05-01',
      //       name: '王小虎',
      //       address: '上海市普陀区金沙江路 1519 弄'
      //     }
      //   ])
      // }, 1000)
    },
  },
}
</script>
<style scoped lang="less">
.contentLeft {
  margin-right: 432px;
  // position: relative;
  .scoreBox,
  .accountBox,
  .reactBox,
  .salaryBox,
  .bzjBox,
  .attBox {
    .title {
      font-size: 18px;
    }
    background: #fff;
    margin-bottom: 10px;
    padding: 20px 32px;
    .keyWrapper {
      .keyBox {
        height: 92px;
        float: left;
        width: 31.33333333%;
        background: #f5f7fb;
        margin-top: 20px;
        border-radius: 4px;
        text-align: center;
        padding: 18px 0;
        .keyName {
          font-size: 14px;
          color: #666;
          line-height: 21px;
        }
        .quantity {
          color: #009588;
          font-weight: bold;
          font-size: 28px;
          line-height: 36px;
        }
      }
      .keyBox:nth-child(3n-1) {
        margin-left: 3%;
        margin-right: 3%;
      }
    }
  }
  .scoreBox {
    height: 230px;
    .scoreLeft {
      height: 190px;
      padding-right: 32px;
      text-align: center;
      border-right: 1px solid #dee5f4;
      .projectLevel {
        margin-top: 30px;
        width: 100px;
      }
    }
    .scoreRight {
      .noData {
        padding-top: 50px;
        text-align: center;
      }
      .title {
        padding-left: 20px;
        font-size: 18px;
        margin-bottom: 12px;
      }
      .listBox {
        ul li {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #333333;
          .time,
          .reason {
            display: inline-block;
            text-align: left;
          }
          .time {
            padding-left: 20px;
            width: 31%;
          }
          .reason {
            width: 67%;
          }
        }
      }
    }
  }
  .accountBox {
    height: 288px;
    position: relative;
    .noAccount {
      padding-top: 90px;
      text-align: center;
    }
    .accountLeft {
      margin-top: 20px;
      height: 184px;
      padding: 20px 20px;
      background: #f5f7fb;
      border: 1px solid #dee5f4;
      border-right: none;
      li {
        line-height: 34px;
        .label {
          font-size: 14px;
          color: #999999;
          margin-right: 4px;
        }
        .information {
          font-size: 14px;
          color: #333333;
        }
      }
    }
    .accountRight {
      margin-top: 20px;
      .bankInfo {
        width: 100%;
        height: 184px;
        padding: 24px 20px;
        border: 1px solid #dee5f4;
        .payoff div {
          width: 50%;
          float: left;
          margin-bottom: 20px;
          border-bottom: 1px solid #dee5f4;
        }
        .color999 {
          font-size: 14px;
        }
        .moneyAll {
          font-size: 22px;
          color: #009588;
          line-height: 50px;
        }
        .moneyLittle {
          font-size: 22px;
          color: #333;
          line-height: 50px;
        }
      }
    }
  }
  .reactBox {
    height: 298px;
    position: relative;
    // .noRealName{
    //     p{
    //         color: #e02020;
    //         font-size: 18px;
    //         text-align: center;
    //         margin-top: 90px;
    //         i {
    //         font-size: 32px;
    //         margin-right: 10px;
    //         vertical-align: middle;
    //         }
    //     }
    //     .addEmployee{
    //         position: absolute;
    //         right: 32px;
    //         bottom: 24px;
    //     }
    // }
  }
  .salaryBox {
    height: 304px;
    position: relative;
    .smallTitle {
      font-size: 14px;
      color: #999999;
    }
    .noSalary {
      p {
        color: #2a2a2a;
        margin-top: 100px;
        text-align: center;
      }
    }
  }
  .bzjBox {
    height: 210px;
    .title {
      margin-bottom: 20px;
    }
    .labelWidth {
      font-size: 14px;
      color: #333;
      display: inline-block;
      height: 34px;
    }
    .information {
      font-size: 14px;
      color: #666;
    }
    .noDeposit {
      p {
        color: #2a2a2a;
        margin-top: 60px;
        text-align: center;
      }
    }
  }
  .attBox {
    height: 334px;
    position: relative;
    .attDataBox {
      .leftBox {
        width: 30%;
        li {
          margin-bottom: 10px;
        }
        .labelTitle {
          font-size: 14px;
          color: #3a3a3a;
        }
        .content {
          font-size: 14px;
          color: #009588;
        }
      }
      .rightBox {
        width: 66%;
      }
      .centerBox {
        width: 24%;
        ul {
          padding-top: 60px;
          padding-left: 24px;
          li {
            margin-bottom: 8px;
          }
          span {
            font-size: 14px;
            color: #485465;
            margin-left: 5%;
          }
        }
      }
      .todayAtt {
        height: 180px;
        // width: 200px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        -ms-transform: translateX(-50%); /* IE 9 */
        -moz-transform: translateX(-50%); /* Firefox */
        -webkit-transform: translateX(-50%); /* Safari 和 Chrome */
        -o-transform: translateX(-50%);
      }
    }
  }
  .noRealName {
    p {
      color: #e02020;
      font-size: 18px;
      text-align: center;
      margin-top: 90px;
      i {
        font-size: 32px;
        margin-right: 10px;
        vertical-align: middle;
      }
    }
    .addEmployee {
      position: absolute;
      right: 32px;
      bottom: 24px;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1440px) {
    .fontSize {
      font-size: 12px !important;
    }
  }
  @media screen and (min-width: 1440px) {
    .keyName {
      font-size: 16px !important;
    }
  }
  @media only screen and (max-width: 1024px) {
    .label,
    .information,
    .color999,
    .labelWidth,
    .keyName {
      font-size: 12px !important;
    }
    .moneyAll {
      font-size: 18px !important;
    }
    .quantity {
      font-size: 22px !important;
    }
    .accountLeft {
      padding: 40px 60px !important;
    }
  }
}
// 所属单位向下箭头与文字不在一行显示问题
/deep/ .el-table .el-table__expand-icon {
  float: left;
}
</style>
